<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
  <title>任务审批</title>
  <div th:replace="common/link::header"></div>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
      <div class="layui-row">
        <div class="layui-col-md12">
          <a class="layui-btn layui-btn-normal layui-btn-xs monitor">审批历史</a>
        </div>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="layui-row">
        <div class="layui-col-md6">
          <form class="layui-form layui-form-pane" lay-filter="flowForm" id="flowForm">
            <!--内置表单-->
            <div id="flowFormView"></div>
            <!--自定义表单-->
            <div id="buildWrap"></div>
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">意见</label>
              <div class="layui-input-block">
                <textarea class="layui-textarea" name="comment" placeholder="请输入意见"></textarea>
              </div>
            </div>
            <div class="layui-form-item" style="text-align:center">
              <div class="layui-btn-container">
                <input type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="reject-submit" id="reject-submit" value="驳回">
                <input type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="ok-submit" id="ok-submit" value="同意">
              </div>
            </div>
          </form>
        </div>
        <div class="layui-col-md6">
          <table id="userTable" lay-filter="userTable"></table>
        </div>
      </div>
    </div>
  </div>
</div>
  <script type="text/html" id="flowFormTpl">
    {{#  layui.each(d, function(index, item){ }}
    {{#  if(item.typeName === 'long'){ }}
    <div class="layui-form-item">
      <label class="layui-form-label">{{item.name}}</label>
      <div class="layui-input-inline">
        <input type="number" lay-verify="required" disabled class="layui-input layui-disabled" name="{{item.id}}" value="{{item.value}}" placeholder="请输入{{item.name}}"/>
      </div>
    </div>
    {{#  } else if(item.typeName === 'string') { }}
    <div class="layui-form-item">
      <label class="layui-form-label">{{item.name}}</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="required" disabled class="layui-input layui-disabled" name="{{item.id}}" value="{{item.value}}" placeholder="请输入{{item.name}}"/>
      </div>
    </div>
    {{#  } else if(item.typeName === "date") { }}
    <div class="layui-form-item">
      <label class="layui-form-label">{{item.name}}</label>
      <div class="layui-input-inline">
        <input type="text" disabled class="layui-input layui-disabled" name="{{item.id}}" id="{{item.id}}"
               dateFormat="{{item.datePatterns}}" placeholder="{{item.datePatterns}}" autocomplete="off"/>
      </div>
    </div>
    {{#  } else if(item.typeName === "enum") { }}
    <div class="layui-form-item">
      <label class="layui-form-label">{{item.name}}</label>
      <div class="layui-input-inline">
        <select name="{{item.id}}" lay-verify="required" disabled>
          {{#  layui.each(item.values, function(k, v){ }}
          <option value="{{k}}">{{v}}</option>
          {{# });  }}
        </select>
      </div>
    </div>
    {{#  } else if(item.typeName === "boolean") { }}
      <div class="layui-form-item">
        <label class="layui-form-label">{{item.name}}</label>
        <div class="layui-input-inline">
          <input type="radio" name="{{item.id}}" value="Y" title="是" disabled>
          <input type="radio" name="{{item.id}}" value="N" title="否" disabled>
        </div>
      </div>
    {{#  } else { }}
      <p>未识别表单</p>
    {{#  } }}
    {{#  }); }}
  </script>
<div th:replace="common/script::footer"></div>
<script th:src="@{/static/lib/form-builder/form-builder.min.js}"></script>
<script th:src="@{/static/lib/form-builder/form-render.min.js}"></script>
<script th:inline="javascript">
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table', 'laytpl', 'laydate'], function() {
    let $ = layui.$,
            form = layui.form,
            table = layui.table,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            processInstanceId = [[${processInstanceId}]];
    $.ajax({
      type: 'GET',
      url:  ctx + '/workFlow/getTaskForm?processInstanceId=' + processInstanceId,
      contentType:'application/json;charset=UTF-8',
      dataType: 'json',
      success: function(result) {
        layer.msg(result.message);
        if (result.code === 200) {
          let data = result.data;
          if (data.hasStartFormKey) {
            // 外置表单
            $('#buildWrap').formRender({
              formData: data.formData.key,
              dataType: 'xml'
            });
            form.val('flowForm',data.formData.value);
            return;
          }
          // 内置表单
          let formProperty = data.formProperties;
          laytpl($("#flowFormTpl").html()).render(formProperty, function(html) {
            $("#flowFormView").html(html);
          });
          $.each(formProperty,function(index,value){
            // 日期类型做特殊处理
            if (value.typeName === 'date') {
              laydate.render({
                elem: '#' + value.id,
                value: value.value,
                format: value.datePatterns
              });
            }
            // 下拉框做特殊处理
            if (value.typeName === 'enum') {
              $("select[name="+value.id+"]").val(value.value);
            }
            // 单选框做特殊处理
            if (value.typeName === 'boolean') {
              $("input[name="+value.id+"][value="+value.value+"]").prop("checked",true);
            }
          });
          form.render(null, 'flowForm');
        }
      }
    });
    // 查询列表接口
    table.render({
      elem: '#userTable',
      height: 'full-110',
      url:  ctx + '/sysUser/page',
      cellMinWidth: 80,
      page: true, //开启分页
      cols: [[ //表头
        {type: 'radio', align : 'center'},
        {field: 'id', title: 'ID', hide:true},
        {field: 'nickName', title: '昵称'},
        {field: 'userName', title: '账户'},
        {field: 'phonenumber', title: '手机号'},
        {field: 'deptName', title: '部门名称'},
        {field: 'postName', title: '岗位名称'},
      ]]
    });
    //监听人员单击事件
    table.on('row(userTable)', function(obj) {
      // 标注选中样式
      obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
      // 选中radio样式
      obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    });
    $('.monitor').on('click', function () {
      layer.open({
        type: 2
        ,shade: 0.3
        ,title: '审批历史'
        ,content: ctx + '/workFlow/monitorPage?processInstanceId=' + processInstanceId
        ,maxmin: true
        ,scrollbar: false
        ,area: ['100%', '100%']
        ,btn: ['确定']
      });
    });
    // 同意
    form.on('submit(ok-submit)', function(data) {
      let users = layui.table.checkStatus('userTable').data;
      if (users.length === 0) {
        layer.msg('请选择审批人');
        return;
      }
      let assignee = users[users.length - 1].userName;
      $.ajax({
        type: 'POST',
        url:  ctx + '/workFlow/complete',
        data: JSON.stringify({
          ...
          data.field,
          processInstanceId,
          assignee
        }),
        contentType:'application/json;charset=UTF-8',
        dataType: 'json',
        success: function(result) {
          layer.msg(result.message);
          if (result.code === 200) {
            let index = parent.layer.getFrameIndex(window.name);
            // 关闭
            parent.layer.close(index);
            // 刷新
            parent.location.reload();
          }
        }
      });
    });
    // 驳回
    form.on('submit(reject-submit)', function(data) {
      $.ajax({
        type: 'POST',
        url:  ctx + '/workFlow/reject',
        data: JSON.stringify({
          ...data.field,
          processInstanceId
        }),
        contentType:'application/json;charset=UTF-8',
        dataType: 'json',
        success: function(result) {
          layer.msg(result.message);
          if (result.code === 200) {
            let index = parent.layer.getFrameIndex(window.name);
            // 关闭
            parent.layer.close(index);
            // 刷新
            parent.location.reload();
          }
        }
      });
    });
  });
</script>
</body>
</html>